<template>
  <div id="Admin">
    <el-breadcrumb
      separator="/"
      style="padding-left: 10px; padding-bottom: 10px; font-size: 12px"
    >
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>后台管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row>
      <el-col :span="16">
        <el-card class="box-card" shadow="hover">
          <el-form
            :inline="true"
            :model="queryMap"
            size="small"
            class="demo-form-inline"
          >
            <el-form-item label="角色名">
              <el-input
                v-model="queryMap.roleName"
                placeholder="请输入角色名"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                @click="search"
                type="primary"
                icon="el-icon-search"
                :loading="loading"
                round
                >查询</el-button
              >
              <el-button
                type="success"
                icon="el-icon-plus"
                round
                :loading="loading"
                @click="show = true"
                >新增</el-button
              >
            </el-form-item>
          </el-form>
          <el-table
            ref="singleTable"
            :data="roleList"
            highlight-current-row
            @current-change="handleCurrentChange"
            style="width: 100%"
          >
            <el-table-column property="roleName" label="角色名" align="center">
            </el-table-column>
            <el-table-column property="roleDes" label="角色描述" align="center">
            </el-table-column>
            <el-table-column
              property="createTime"
              label="创建时间"
              align="center"
            >
              <template slot-scope="scope">{{
                scope.row.createTime | dateFormat
              }}</template>
            </el-table-column>
            <el-table-column
              property="modifyTime"
              label="修改时间"
              align="center"
            >
              <template slot-scope="scope">{{
                scope.row.modifyTime | dateFormat
              }}</template>
            </el-table-column>
            <el-table-column label="操作" width="200" align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  icon="el-icon-edit"
                  size="mini"
                  :loading="loading"
                  @click="getCurrentRole(scope.row.roleId)"
                  >编辑</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            style="margin-top: 10px"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.queryMap.page"
            :page-sizes="[10, 50, 100]"
            :page-size="this.queryMap.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card
          class="box-card"
          shadow="hover"
          style="margin-left: 10px"
          v-loading="loading"
        >
          <el-tree
            :data="menuList"
            show-checkbox
            highlight-current
            node-key="menuId"
            :props="{ children: 'childMenu', label: 'menuName' }"
            :default-expanded-keys="fatherMenuId"
            ref="tree"
          >
          </el-tree>
          <el-row style="margin-top: 10px; margin-left: 200px" align="right"
            ><el-button
              type="success"
              round
              icon="el-icon-check"
              :loading="loading"
              @click="authMenus2CurrentRole"
              >授权</el-button
            ></el-row
          >
        </el-card></el-col
      >
    </el-row>
    <el-dialog title="角色详情信息" :visible.sync="show" width="400px">
      <el-form :model="currentRole" align="center">
        <el-form-item label="角色名" label-width="70px">
          <el-input
            v-model="currentRole.roleName"
            autocomplete="off"
            style="width: 220px"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名" label-width="70px">
          <el-input
            v-model="currentRole.roleDes"
            autocomplete="off"
            style="width: 220px"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          :loading="loading"
          @click="updateCurrentRole(currentRole.roleId)"
          >确 定</el-button
        >
        <el-button @click="show = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from "vuex";
import {
  queryRolesByPage,
  queryCurrentRole,
  queryMenus,
  editCurrentRole,
  authMenu,
} from "api/api";
export default {
  data() {
    return {
      queryMap: { page: 1, size: 10 },
      loading: false,
      show: false,
      roleList: [],
      total: 0,
      currentRole: {},
      currentRoleMenuIds: [],
      menuList: [],
      fatherMenuId: [],
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    //改变页码
    handleSizeChange(newSize) {
      this.queryMap.size = newSize;
      this.getRolesByPage();
    },
    //翻页
    handleCurrentChange(current) {
      this.queryMap.page = current;
      this.getRolesByPage();
    },
    search() {
      queryRolesByPage(this.userInfo.sessionId, this.queryMap).then((res) => {
        if (!res.flag) {
          this.$message.error(res.message);
        } else {
          this.total - res.data.total;
          this.roleList = res.data.rows;
        }
      });
    },
    //条件查询
    getRolesByPage() {
      queryRolesByPage(this.userInfo.sessionId, this.queryMap).then((res) => {
        if (!res.flag) {
          this.$message.error(res.message);
        } else {
          this.total = res.data.total;
          this.roleList = res.data.rows;
        }
      });
    },
    handleCurrentChange(row) {
      this.loading = true;
      let that = this; //默认选中的树的数据
      //初始化操作
      this.currentRole = [];
      queryCurrentRole(this.userInfo.sessionId, row.roleId).then((res) => {
        if (res.data.menuIds == null) {
          this.currentRoleMenuIds = [];
          that.$refs.tree.setCheckedKeys(this.currentRoleMenuIds);
          this.$message({
            message: "角色菜单未授权，请及时授权，以保证系统正常运行！",
            type: "warning",
          });
          this.currentRole = res.data;
          this.loading = false;
        } else {
          //取消选中上一个角色对应菜单节点
          if (this.currentRoleMenuIds != []) {
            this.currentRoleMenuIds.forEach((menuId) => {
              that.$refs.tree.setChecked(menuId, false, true);
            });
          }
          this.currentRole = res.data;
          this.currentRoleMenuIds = res.data.menuIds;
          this.currentRoleMenuIds.forEach((menuId) => {
            that.$refs.tree.setChecked(menuId, true, false);
          });
          this.loading = false;
        }
      });
    },
    //获取当前详情角色信息
    getCurrentRole(roleId) {
      this.loading = true;
      this.show = true;
      queryCurrentRole(this.userInfo.sessionId, roleId).then((res) => {
        if (!res.flag) {
          this.$message.error(res.message);
          this.loading = false;
        } else {
          this.currentRole = res.data;
          this.loading = false;
        }
      });
    },
    //获取所有菜单信息
    getMenus() {
      queryMenus(this.userInfo.sessionId).then((res) => {
        if (!res.flag) {
          this.$message.error(res.message);
        } else {
          this.menuList = res.data;
          for (let index = 0; index < this.menuList.length; index++) {
            this.fatherMenuId.push(this.menuList[index].menuId);
            if (this.menuList[index].authority == 1) {
              this.menuList[index].disabled = false;
              for (let j = 0; j < this.menuList[index].childMenu.length; j++) {
                this.menuList[index].childMenu[j].disabled = false;
              }
            }
          }
        }
      });
    },
    //当前角色授权
    authMenus2CurrentRole() {
      this.loading = true;
      var that = this;
      let authMenuIds = that.$refs.tree.getCheckedNodes(false, true);
      if (this.currentRole.roleId == null) {
        this.$message({
          type: "warning",
          message: "未选中角色，不能进行授权！",
        });
        this.loading = false;
        return;
      }
      authMenu(
        this.userInfo.sessionId,
        this.currentRole.roleId,
        authMenuIds
      ).then((res) => {
        if (!res.flag) {
          this.$message.error(res.message);
          this.loading = false;
        } else {
          this.$message({
            type: "success",
            message: "授权成功！",
          });
          this.loading = false;
        }
      });
    },
    //更新当前角色信息
    updateCurrentRole(roleId) {
      if (roleId != null) {
        //更新操作
        editCurrentRole(this.userInfo.sessionId, this.currentRole).then(
          (res) => {
            if (!res.message) {
              this.$message.error(res.message);
            } else {
              this.$message({
                type: "success",
                message: "更新成功！",
              });
              this.show = false;
            }
          }
        );
      } else {
        //新增操作
      }
    },
  },
  mounted() {
    this.getRolesByPage();
    this.getMenus();
  },
};
</script>